<template>
  <view class="order-detail-page">
    <!-- 顶部导航栏 -->
    <!-- <view class="header-nav">
      <view class="nav-content">
        <view class="back-btn" @click="goBack">
          <text class="iconfont-v2 icon-youjiantou back-icon" style="transform: rotate(180deg);"></text>
        </view>
        <view class="page-title">
          <text class="title-text">待付款</text>
          <text class="iconfont-v2 icon-shijian clock-icon"></text>
        </view>
        <view class="header-actions">
          <text class="iconfont-v2 icon-gengduo more-icon"></text>
          <text class="iconfont-v2 icon-yanjing target-icon"></text>
        </view>
      </view>
    </view> -->

    <!-- 状态横幅 -->
    <view class="status-banner">
      <view class="page-title">
        <text class="iconfont-v2 icon-shijian clock-icon"></text>
        <text class="title-text">待付款</text>
      </view>
      <text class="banner-text">10小时后订单关闭,请及时付款哦</text>
    </view>

    <!-- 地址信息卡片 -->
    <view class="address-card">
      <view class="address-content">
        <view class="address-info">
          <text class="iconfont-v2 icon-dingwei address-icon"></text>
          <view class="address-details">
            <text class="address-text">南宁市西乡塘区北湖南路32号南宁市西乡塘区北湖南路32号</text>
            <text class="recipient-info">李大师 15800000000</text>
          </view>
        </view>
        <text class="iconfont-v2 icon-youjiantou arrow-icon"></text>
      </view>
    </view>

    <!-- 商品详情卡片 -->
    <view class="product-card">
      <view class="product-content">
        <view class="product-image">
          <image src="http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" alt="商品图片" />
        </view>
        <view class="product-info">
          <text class="product-name">意大利超火的球鞋</text>
          <text class="product-desc">说明:1kg/份</text>
        </view>
        <text class="product-price">¥38.8</text>
      </view>
    </view>

    <!-- 价格汇总卡片 -->
    <view class="price-summary-card">
      <view class="price-item">
        <text class="price-label">商品小计</text>
        <text class="price-value">¥38.8</text>
      </view>
      <view class="price-item">
        <text class="price-label">活动优惠</text>
        <text class="price-value discount">-¥7</text>
      </view>
      <view class="price-item total">
        <text class="price-label">应付金额合计</text>
        <text class="price-value total-price">¥31.8</text>
      </view>
    </view>

    <!-- 订单信息卡片 -->
    <view class="order-info-card">
      <view class="info-item">
        <text class="info-label">下单时间</text>
        <text class="info-value">2021.12.27 12:22:35</text>
      </view>
      <view class="info-item">
        <text class="info-label">订单编号</text>
        <text class="info-value">8283894949838</text>
      </view>
      <view class="info-item">
        <text class="info-label">支付方式</text>
        <text class="info-value">微信支付</text>
      </view>
      <view class="info-item">
        <text class="info-label">交易流水号</text>
        <text class="info-value">183772889499495885993884</text>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <button class="cancel-btn flex-center" @click="cancelOrder">
        <text>取消订单</text>
      </button>
      <button class="remind-btn flex-center" @click="remindShipment">
        <text>提醒发货</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 订单数据
      orderInfo: {
        status: "pending_payment",
        statusText: "待付款",
        remainingTime: "10小时后订单关闭,请及时付款哦",
        address: {
          full: "南宁市西乡塘区北湖南路32号南宁市西乡塘区北湖南路32号",
          recipient: "李大师",
          phone: "15800000000",
        },
        product: {
          name: "意大利超火的球鞋",
          description: "说明:1kg/份",
          price: 38.8,
          image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
        },
        pricing: {
          subtotal: 38.8,
          discount: 7,
          total: 31.8,
        },
        orderDetails: {
          orderTime: "2021.12.27 12:22:35",
          orderNumber: "8283894949838",
          paymentMethod: "微信支付",
          transactionId: "183772889499495885993884",
        },
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    cancelOrder() {
      uni.showModal({
        title: '确认取消',
        content: '确定要取消这个订单吗？',
        success: (res) => {
          if (res.confirm) {
            console.log("取消订单");
            // 这里可以添加取消订单的逻辑
            uni.showToast({
              title: '订单已取消',
              icon: 'success'
            });
          }
        }
      });
    },
    remindShipment() {
      console.log("提醒发货");
      // 这里可以添加提醒发货的逻辑
      uni.showToast({
        title: "已提醒商家尽快发货",
        icon: 'success'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail-page {
  min-height: 100vh;
  padding-bottom: 160rpx;
}

.header-nav {
  background: transparent;
  padding: 20rpx 30rpx;
  padding-top: 80rpx;

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .back-btn {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      .back-icon {
        font-size: 40rpx;
        color: #333;
      }
    }

    .page-title {
      display: flex;
      align-items: center;
      gap: 12rpx;

      .title-text {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }

      .clock-icon {
        font-size: 32rpx;
        color: #ED6567;
      }
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 30rpx;

      .more-icon,
      .target-icon {
        font-size: 36rpx;
        color: #666;
        cursor: pointer;
      }
    }
  }
}

.status-banner {
  background: linear-gradient(135deg, #ED6567 0%, #ff6b6b 100%);
  padding: 40rpx 30rpx;
  margin: 20rpx;
  border-radius: 24rpx;
  color: white;

  .page-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 16rpx;

    .title-text {
      font-size: 36rpx;
      font-weight: 600;
    }

    .clock-icon {
      font-size: 32rpx;
    }
  }

  .banner-text {
    font-size: 28rpx;
    opacity: 0.9;
  }
}

.address-card,
.product-card,
.price-summary-card,
.order-info-card {
  background: white;
  margin: 20rpx;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.address-card {
  .address-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .address-info {
      display: flex;
      align-items: flex-start;
      flex: 1;

      .address-icon {
        font-size: 32rpx;
        color: #ED6567;
        margin-right: 20rpx;
        margin-top: 4rpx;
      }

      .address-details {
        flex: 1;

        .address-text {
          font-size: 32rpx;
          color: #333;
          font-weight: 500;
          margin-bottom: 8rpx;
          display: block;
        }

        .recipient-info {
          font-size: 28rpx;
          color: #666;
          display: block;
        }
      }
    }

    .arrow-icon {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.product-card {
  .product-content {
    display: flex;
    align-items: center;
    gap: 24rpx;

    .product-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 16rpx;
      overflow: hidden;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .product-info {
      flex: 1;

      .product-name {
        font-size: 32rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 8rpx;
        display: block;
      }

      .product-desc {
        font-size: 28rpx;
        color: #666;
        display: block;
      }
    }

    .product-price {
      font-size: 32rpx;
      color: #ED6567;
      font-weight: 600;
    }
  }
}

.price-summary-card {
  .price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 0;
    border-bottom: 2rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    &.total {
      padding-top: 20rpx;
      border-top: 2rpx solid #f0f0f0;
      margin-top: 8rpx;

      .price-label {
        font-weight: 600;
      }

      .total-price {
        font-size: 36rpx;
        color: #ED6567;
        font-weight: 700;
      }
    }

    .price-label {
      font-size: 28rpx;
      color: #666;
    }

    .price-value {
      font-size: 28rpx;
      color: #333;

      &.discount {
        color: #ED6567;
      }
    }
  }
}

.order-info-card {
  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 0;
    border-bottom: 2rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      font-size: 28rpx;
      color: #666;
    }

    .info-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 30rpx;
  border-top: 2rpx solid #f0f0f0;
  display: flex;
  gap: 20rpx;

  .cancel-btn,
  .remind-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;

    &.cancel-btn {
      background: white;
      border: 2rpx solid #ddd;
      color: #666;

      &:hover {
        border-color: #999;
        color: #333;
      }
    }

    &.remind-btn {
      background: #ED6567;
      border: none;
      color: white;

      &:hover {
        background: #d55a54;
      }
    }
  }
}
</style>